<template>
  <div>
    <table class="data-table">
      <tr>
        <td>
          <div class="data-cell">
            <img src="./img/温度.png" class="icon" />
            <div>内部温度：<span>{{ internalTemperature }} °C</span></div>
          </div>
        </td>
        <td>
          <div class="data-cell">
            <img src="./img/温度.png" class="icon" />
            <div>外部温度：<span>0 °C</span></div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="data-cell">
            <img src="./img/湿度.png" class="icon" />
            <div>内部湿度：<span>{{ internalHumidity }} rh</span></div>
          </div>
        </td>
        <td>
          <div class="data-cell">
            <img src="./img/湿度.png" class="icon" />
            <div>外部湿度：<span>0rh</span></div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="data-cell">
            <img src="./img/一氧化碳-copy.png" class="icon" />
            <div>CO浓度：<span>0.0 pm</span></div>
          </div>
        </td>
        <td>
          <div class="data-cell">
            <img src="./img/出勤率.png" class="icon" />
            <div>出勤频率：<span>0.0</span></div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="data-cell">
            <img src="./img/数量.png" class="icon" />
            <div>蜜蜂数量：<span>0</span></div>
          </div>
        </td>
        <td>
          <div class="data-cell">
            <img src="./img/频率.png" class="icon" />
            <div>进出频率：<span>0</span></div>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align: left;">
          <div class="data-cell">
            <img src="./img/记录时间.png" class="icon" />
            <div>记录时间：<span>{{ dataTime }}</span></div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from 'axios'; // 导入异步请求

export default {
  name: 'BottomData',
  data() {
    return {
      internalTemperature: '',
      internalHumidity: '',
      dataTime: ''
    };
  },
  mounted() {
    this.fetchData(); // 自定义函数
  },
  methods: {
    async fetchData() { // async用于定义异步函数的关键字。它允许你在函数内部使用 await，使得异步操作看起来像同步代码，
      try {
        const response = await axios.get('http://localhost:8086/data/findSourceAll');
        const data = response.data;

        // 根据实际返回数据结构来赋值
        this.internalTemperature = data[data.length - 1].temperature; // 后端实体属性名
        this.internalHumidity = data[data.length - 1].humidity;
        this.dataTime = data[data.length - 1].create_time
      } catch (error) {
        console.error('获取数据失败', error);
      }
    }
  }
};

</script>

<style>
.data-table {
  width: 350px;
  border-collapse: collapse;
  table-layout: fixed;
}

.data-table td {
  width: 175px;
  height: 35px;
  text-align: center;
}

.data-cell {
  display: flex;
  align-items: center;
  color: aquamarine;
  font-size: 15px;
}

.data-cell img {
  margin-right: 5px;
  /* 图标与文本间的间距 */
  vertical-align: middle;
  /* 确保图标垂直居中 */
}

.data-cell span {
  color: gold;
  font-size: 17px;
}
</style>
